<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="themes/pinghsu/header::header('活动中心',null)"></div>
<head>
    <!-- 添加需要的CSS -->
    <link rel="stylesheet" th:href="@{/plugins/toast/jquery.toast.css}">
</head>
<body>
<div class="main-content activities-page clearfix">
    <header class="page-header">
        <h1 class="page-title" itemprop="name headline">活动中心</h1>
        <p class="page-description">参与各种线上线下活动，与更多志同道合的朋友交流</p>
    </header>
    
    <div class="activities-list clearfix">
        <div th:if="${activities.isEmpty()}" class="no-activity">
            <p>暂时没有活动信息</p>
        </div>
        
        <div th:unless="${activities.isEmpty()}" class="activities-container">
            <div class="activity-card" th:each="activity : ${activities}">
                <div class="activity-cover">
                    <a th:href="@{'/activities/' + ${activity.activityId}}">
                        <img th:src="${activity.coverImage != null ? activity.coverImage : '/static/img/pinghsu.jpg'}" alt="活动封面">
                    </a>
                </div>
                <div class="activity-info">
                    <h3 class="activity-title">
                        <a th:href="@{'/activities/' + ${activity.activityId}}" th:text="${activity.activityName}"></a>
                    </h3>
                    <div class="activity-meta">
                        <span class="activity-time">
                            <i class="fa fa-calendar"></i> 
                            <span th:text="${#dates.format(activity.startTime, 'yyyy-MM-dd HH:mm')}"></span>
                        </span>
                        <span class="activity-address" th:if="${activity.activityAddress != null}">
                            <i class="fa fa-map-marker"></i> 
                            <span th:text="${activity.activityAddress}"></span>
                        </span>
                        <span class="activity-participants">
                            <i class="fa fa-users"></i> 
                            <span th:text="${activity.participantCount ?: 0}"></span> 人参与
                        </span>
                    </div>
                    <div class="activity-summary" th:text="${#strings.abbreviate(#strings.replace(#strings.escapeXml(activity.activityDescription?:'暂无描述'), '<br />', ' '), 100)}"></div>
                    <div class="activity-actions">
                        <a th:href="@{'/activities/' + ${activity.activityId}}" class="btn btn-blue">查看详情</a>
                        <button th:if="${activity.isParticipating}" class="btn btn-outline quit-activity" th:data-id="${activity.activityId}">取消参与</button>
                        <button th:unless="${activity.isParticipating}" class="btn btn-outline join-activity" th:data-id="${activity.activityId}">参与活动</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
$(function() {
    // 参与活动
    $('.join-activity').click(function() {
        var activityId = $(this).data('id');
        var btn = $(this);
        
        $.ajax({
            url: '/activities/join/' + activityId,
            type: 'POST',
            success: function(result) {
                if (result.success) {
                    btn.removeClass('join-activity').addClass('quit-activity').text('取消参与');
                    // 更新参与人数
                    var countEl = btn.closest('.activity-card').find('.activity-participants span');
                    var count = parseInt(countEl.text()) + 1;
                    countEl.text(count);
                    
                    // 显示成功消息
                    showMsg(result.msg, "success", 2000);
                } else {
                    // 登录失效或其他错误
                    if (result.msg.indexOf('登录') >= 0) {
                        window.location.href = '/user/login';
                    } else {
                        showMsg(result.msg, "error", 2000);
                    }
                }
            },
            error: function() {
                showMsg("操作失败，请重试", "error", 2000);
            }
        });
    });
    
    // 退出活动
    $('.quit-activity').click(function() {
        var activityId = $(this).data('id');
        var btn = $(this);
        
        $.ajax({
            url: '/activities/quit/' + activityId,
            type: 'POST',
            success: function(result) {
                if (result.success) {
                    btn.removeClass('quit-activity').addClass('join-activity').text('参与活动');
                    // 更新参与人数
                    var countEl = btn.closest('.activity-card').find('.activity-participants span');
                    var count = parseInt(countEl.text()) - 1;
                    countEl.text(count < 0 ? 0 : count);
                    
                    // 显示成功消息
                    showMsg(result.msg, "success", 2000);
                } else {
                    // 登录失效或其他错误
                    if (result.msg.indexOf('登录') >= 0) {
                        window.location.href = '/user/login';
                    } else {
                        showMsg(result.msg, "error", 2000);
                    }
                }
            },
            error: function() {
                showMsg("操作失败，请重试", "error", 2000);
            }
        });
    });
});
</script>

<style>
.activities-page {
    padding: 30px 0;
}
.page-header {
    text-align: center;
    margin-bottom: 40px;
}
.page-title {
    font-size: 32px;
    margin: 0 0 10px;
    color: #3d4450;
}
.page-description {
    color: #777;
    font-size: 16px;
}
.activities-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.activity-card {
    width: 100%;
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    transition: transform 0.3s ease;
}
.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.activity-cover {
    width: 30%;
    overflow: hidden;
}
.activity-cover img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.activity-card:hover .activity-cover img {
    transform: scale(1.05);
}
.activity-info {
    width: 70%;
    padding: 20px;
    position: relative;
}
.activity-title {
    margin: 0 0 15px;
    font-size: 22px;
}
.activity-title a {
    color: #3d4450;
    text-decoration: none;
}
.activity-title a:hover {
    color: #6fa3ef;
}
.activity-meta {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    color: #888;
    font-size: 14px;
}
.activity-meta span {
    margin-right: 20px;
    margin-bottom: 5px;
}
.activity-meta i {
    margin-right: 5px;
}
.activity-summary {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}
.activity-actions {
    display: flex;
    gap: 10px;
}
.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-blue {
    background-color: #6fa3ef;
    color: white;
    border: none;
}
.btn-blue:hover {
    background-color: #5a92e0;
}
.btn-outline {
    background-color: transparent;
    border: 1px solid #6fa3ef;
    color: #6fa3ef;
}
.btn-outline:hover {
    background-color: #6fa3ef;
    color: white;
}
.no-activity {
    text-align: center;
    padding: 50px 0;
    color: #888;
}

@media (max-width: 768px) {
    .activity-card {
        flex-direction: column;
    }
    .activity-cover, .activity-info {
        width: 100%;
    }
    .activity-cover img {
        height: 180px;
    }
}
</style>

<!-- 添加需要的JS -->
<script th:src="@{/js/mayday.js}"></script>
<script th:src="@{/plugins/toast/jquery.toast.js}"></script>

</body>
<div th:replace="themes/pinghsu/footer::footer"></div>
</html>
